Introdução à Lógica de Programação

Aula 13 - Arrays (listas)

Helder Jefferson Ferreira da Luz

helder.luz@ifpr.edu.br

Objetivos

• Entender o que são arrays (listas) e como manipulá-los no JavaScript.

Arrays (listas)

Array é uma estrutura de dados que armazena uma coleção de elementos em ordem.

• Características: mutável, permite elementos duplicados, pode conter tipos mistos (números, strings, objetos, etc.).

É criado utilizando colchetes [ ] ou o construtor Array().

Os arrays possuem funções, chamadas de métodos, que permitem sua manipulação.

Arrays - criação

Exemplo de criação de array

const lista1 = [];                // Array vazio
const lista2 = Array();           // Array vazio
const lista3 = [4, 7, 8];         // Array com três elementos
const lista4 = Array.from(lista3); // Cópia do array

Arrays - acessando elementos

O acesso aos elementos do array é feito por meio de índice. No JavaScript moderno, também podemos usar at() para índices negativos.

Exemplo:

const frutas = ["maçã", "banana", "laranja"]; // array de strings
console.log(frutas[0]);     // maçã
console.log(frutas.at(-1)); // laranja (at() aceita índice negativo)

Arrays - operações básicas

Para verificar o tamanho, use a propriedade .length.

const frutas = ["maçã", "banana", "laranja"];
const tamanho = frutas.length;
console.log(`Número de elementos do array: ${tamanho}`);

Para verificar se um elemento está presente, use includes().

const numeros = [1, 2, 3];
console.log(numeros.includes(2)); // true
console.log(!numeros.includes(4)); // true (não está presente)

Arrays - iteração

Os laços de repetição podem ser usados para iterar pelos elementos de um array.

Exemplo

const numeros = [10, 20, 30, 40, 50];

// for tradicional por índice
for (let i = 0; i < numeros.length; i++) {
    console.log(numeros[i]);
}

// for...of (itera valores)
for (const num of numeros) {
    console.log(num);
}

Arrays - modificando elementos

Para modificar um elemento existente, use o acesso por índice.

const numeros = [1, 2, 3, 4, 5];
numeros[2] = 10; // modifica o valor na posição 2

Arrays - métodos de manipulação

Exemplo com push(), pop() e splice() (remoção)

const nomes = ['João', 'Maria', 'José'];

nomes.push('Ana'); // adiciona no final

for (const nome of nomes) {
    console.log(nome);
}

nomes.pop(); // remove e retorna o último

// remover primeira ocorrência de 'João'
const idx = nomes.indexOf('João');
if (idx !== -1) nomes.splice(idx, 1);

for (const nome of nomes) {
    console.log(nome);
}

Arrays - inserção de valores pelo usuário

Exemplo (browser)

const idades = [];
for (let i = 0; i < 5; i++) {
    const valor = Number(prompt('Digite uma idade:'));
    if (!Number.isNaN(valor)) {
        idades.push(valor);
    }
}
console.log(idades);

Arrays - inserção de elemento

Exemplo com splice(<start>,<deleteCount>,<items>)

const nomes = ['João', 'Maria', 'José', 'Pedro', 'Ana'];

nomes.splice(2, 0, 'Carlos'); // insere 'Carlos' na posição 2

console.log(nomes); // ['João', 'Maria', 'Carlos', 'José', 'Pedro', 'Ana']

Arrays - busca de elemento

Exemplo com indexOf(<searchElement>,<fromIndex>)

const nomes = ['João', 'Maria', 'José', 'Pedro', 'Ana'];

const indice = nomes.indexOf('Maria'); // encontra o índice
if (indice !== -1) {
    nomes[indice] = 'Carlos'; // substitui
}

console.log(nomes); // ['João', 'Carlos', 'José', 'Pedro', 'Ana']

Arrays - limpeza

Esvaziando um array

const nomes = ['João', 'Maria', 'José', 'Pedro', 'Ana'];

// forma comum
nomes.length = 0;
console.log(nomes); // []

// ou
const nomes2 = ['A', 'B'];
nomes2.splice(0, nomes2.length);
console.log(nomes2); // []

Arrays - invertendo

Exemplo com reverse() e toReversed()

const nomes = ['João', 'Maria', 'José', 'João', 'Pedro', 'Ana'];

nomes.reverse(); // in-place
console.log(nomes); // ['Ana', 'Pedro', 'João', 'José', 'Maria', 'João']

// versão não mutável (moderno)
const invertido = nomes.toReversed();
console.log(invertido);

Arrays - ordenando

O método sort() ordena os elementos em ordem alfabética UTF-16. No comportamento padrão, não funciona para ordenar lista de números.

Exemplo - strings (padrão)

const nomes = ['João', 'Maria', 'José', 'João', 'Pedro', 'Ana'];

nomes.sort(); // alfabética (Unicode)
console.log(nomes); // ['Ana', 'João', 'João', 'José', 'Maria', 'Pedro']

Exemplo - ordem inversa

const nomes2 = ['João', 'Maria', 'José', 'João', 'Pedro', 'Ana'];
nomes2.sort().reverse();
console.log(nomes2);

Arrays - concatenação

Unir dois ou mais arrays em um novo.

Método concat()

const lista1 = [1, 2, 3];
const lista2 = [4, 5, 6];
const lista3 = lista1.concat(lista2);
console.log(lista3); // [1, 2, 3, 4, 5, 6]

Operador spread ...

const lista4 = [...lista1, ...lista2];
console.log(lista4); // [1, 2, 3, 4, 5, 6]

Arrays - fatiamento (slice)

Permite acessar partes específicas de um array sem alterá-lo.

Método: slice(inicio, fim) — retorna elementos de inicio até fim (exclusivo). Aceita índices negativos.

Exemplo

const lista = [1,2,3,4,5,6,7,8,9,10];
console.log(lista.slice(2,5));   // [3,4,5]
console.log(lista.slice(0,5));   // [1,2,3,4,5]
console.log(lista.slice(5));     // [6,7,8,9,10]
console.log(lista.slice());      // cópia superficial
console.log(lista.slice(0, -1)); // [1..9]

Arrays - cópia

Para copiar um array superficialmente use slice() ou spread [...].

Exemplo

const lista = [1,2,3,4,5,6,7,8,9,10];
const copia = lista.slice();
const copia2 = [...lista];
console.log(copia, copia2);

Arrays - passagem por função

function imprimirVetor(vetor) {
    console.log(vetor.join(' '));
}

const vetor = [1,2,3,4];
imprimirVetor(vetor);

Dúvidas?

Exercícios

1. Implemente um programa que permita ao usuário adicionar elementos em um array até que decida parar. Em seguida, exiba o array resultante e sua quantidade de elementos.
2. Leia um array de 12 números e depois dois valores X e Y correspondentes a posições no array. Escreva a soma dos valores nas posições X e Y.
3. Declare um array e preencha-o apenas com números ímpares informados pelo usuário até ter 10 elementos. Ao final, apresente o array.
4. Leia um array de 10 números e em seguida um valor X. Busque X e informe a posição em que foi encontrado (ou “não encontrado”) na lista.

Exercícios

5. Escreva uma função em JavaScript que calcule a média de um array de números.
6. Escreva uma função que encontre o maior e o menor valor em um array de números.
7. Implemente um programa que simule uma lista de compras. O usuário deve poder adicionar, remover e visualizar itens a qualquer momento (use push, splice).

Exercícios

8. Remova todas as ocorrências de um valor X de um array (use for/while e splice).
9. Insira um novo valor em uma posição P válida, deslocando os demais elementos para a direita (use splice).
10. Dado dois arrays A e B, crie um terceiro array C com os elementos de A seguidos pelos de B (use concat ou ...).
11. Inverta um array sem usar reverse() (faça trocas entre o primeiro e o último, avançando para o centro).
12. Rotacione um array K posições à direita (ex.: [1,2,3,4], K=1 → [4,1,2,3]) usando pop()/unshift().

Exercícios

13. Mescle dois arrays já ordenados (crescentes) em um novo array também ordenado, sem usar sort() (técnica de “merge”).
14. Separe um array de números em dois: um com pares e outro com ímpares.